<template>
  <view class="myClient">
    <view class="myClient-top">
      <view class="myClient-box">
        <view class="myClient-top-box">
          <text>29,999</text>
          直推人数（人）
        </view>
        <view class="myClient-top-box">
          <text>16,865</text>
          间接团队总数（人）
        </view>
      </view>

      <view class="changeRecord-top">
        <view class="date-select">
          <up-datetime-picker
            hasInput
            :show="show"
            v-model="value1"
            mode="year-month"
          ></up-datetime-picker>
          <view class="date-img"
            ><image src="@/static/my/lower-icon.png" mode="widthFix"
          /></view>
        </view>

        <view class="myClient-search">
          <u-search
            placeholder="申请人"
            :clearabled="true"
            :show-action="false"
            v-model="keywords"
            @search="search"
          ></u-search>
        </view>
        <view class="myClient-img"
          ><image src="@/static/my/search.png" mode="widthFix"
        /></view>
      </view>
    </view>

    <view class="content">
      <view class="myClient-text">
        <view class="text-left">2024年7月</view>
        <view class="text-right">注册（人数）：<span>45</span></view>
      </view>

      <view class="myClient-list">
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity shopkeeper">店主</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity distributor">经销商</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity serviceCentre">服务中心</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity provincial">省级代理</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity member">会员</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity member">会员</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="myClient-text">
        <view class="text-left">2024年7月</view>
        <view class="text-right">注册（人数）：<span>45</span></view>
      </view>

      <view class="myClient-list">
        <view class="myClient-list-card">
          <view class="list-card-box">
            <view class="list-card-top">
              <view class="list-card-name">张小凡</view>
              <view class="list-card-identity member">会员</view>
            </view>
            <view class="list-card-right"
              >138****8000<image
                src="@/static/team/shopkeeper/phone-icon.png"
                mode="widthFix"
              ></image
            ></view>
          </view>

          <view class="list-card-footer">注册时间：2024-7-12 12:09</view>
          <u-line length="85%" class="notuse-line"></u-line>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { inject, ref } from "vue";
const tabList = ref([
  { name: "全部", value: 0 },
  { name: "会员", value: 1 },
  { name: "店主", value: 2 },
  { name: "经销商", value: 3 },
  { name: "服务中心", value: 4 },
  { name: "省级代理", value: 5 },
]);

const show = ref(false);
const value1 = ref(Date.now());

const keywords = ref("");
const search = () => {};
</script>
<style lang="scss" scoped>
@import "myClient.scss";
</style>
